<template>
  <div>
    <com-head title='订单详情页'/>
  <div class="wrap">
    <van-contact-card
      type="edit"
      :name="contact.linkMan"
      :tel="contact.mobile"
      @click="onEdit"
    />
    <div class="items" >
      <div class="item" v-for="item in items" :key="item.id">
        <van-card
        :num="item.number"
        :price="item.price"
        :title="item.name"
        :thumb="item.pic"
      />
      </div>
    </div>
    <van-submit-bar :price="total*100" button-text="提交订单" @submit="onSubmit" />
  </div>
  </div>
</template>

<script>
import ComHead from '@components/ComHead.vue'
import { itemCart, fetchDefaultContact, fetchContactInfo } from '@api'
export default {
  data () {
    return {
      contact: {},
      items: [],
      total: 0,
      token: localStorage.getItem('token')
    }
  },
  created () {
    this.itemCart()
    this.fetchContact()
  },
  methods: {
    // 默认联系人
    fetchContact () {
      // 获取订单联系人
      if (this.$route.query.id) {
        fetchContactInfo({
          id: this.$route.query.id,
          token: this.token
        }).then(res => {
          console.log(res)
          if (res.data.code === 0) {
            this.contact = res.data.data.info
          }
        })
      } else {
        fetchDefaultContact({
          token: this.token
        }).then(res => {
          if (res.data.code === 0) {
            console.log(res)
            this.contact = res.data.data.info
          }
        })
      }
    },
    onSubmit () {
      alert('提交订单成功')
    },
    onEdit () {
      // 切换联系人
      this.$router.push('/contactlist')
    },
    // 获取订单商品数据
    itemCart () {
      itemCart({
        token: this.token
      }).then(res => {
        if (res.data.code === 0) {
          // console.log(res)
          // 对购物车中的数据进行筛选 出已选中的商品
          this.items = res.data.data.items.filter(item => item.selected)
          this.total = res.data.data.price
        }
      })
    }
  },
  components: { ComHead }
}
</script>

<style lang="scss" scoped>
  .wrap{
    margin-top: 46px;
  }
</style>
